<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="command/echarts/echarts.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:500px;"></div>
<script type="text/javascript">
    let typeName = [];
    let seriesTypeName = {};
    let appTypeData = [];

    $.ajax({
        url: "/getPieAppTypeList",         //设置数据访问接口
        method:"PUT",
        dataType:"json",
        async: false,
        success: function (data) {
            appTypeData = data;
            for (let i = 0; i < data.length; i++){
                typeName.push(data[i].name);
                seriesTypeName[data[i].name] = i<6;
            }
        },
        error :function(errorMsg) {//请求失败执行的方法
            alert("获取后台数据失败！");
        }
    });
    console.log("获取所有的标题"+typeName);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    var scale = 1;

    var rich = {
        yellow: {
            color: "#666699",
            fontSize: 30 * scale,
            padding: [5, 4],
            align: 'center'
        },
        total: {
            color: "#666699",
            fontSize: 40 * scale,
            align: 'center'
        },
        white: {
            color: "#fff",
            align: 'center',
            fontSize: 14 * scale,
            padding: [21, 0]
        },
        blue: {
            color: '#666699',
            fontSize: 16 * scale,
            align: 'center'
        },
        hr: {
            borderColor: '#000000',
            width: '100%',
            borderWidth: 1,
            height: 0,
        }
    };
    var option = {
        backgroundColor: '#ffffff',
        title: {
            text:'应用数量',
            left:'center',
            top:'53%',
            padding:[24,0],
            textStyle:{
                color:'#000000',
                fontSize:18*scale,
                align:'center'
            }
        },
        legend: {
            selectedMode:false,
            formatter: function(name) {
                var total = 0; //各科正确率总和
                var averagePercent; //综合正确率
                appTypeData.forEach(function(value, index, array) {
                    total += value.value;
                });
                return '{total|' + total + '}';
            },
            data: [appTypeData[0].name],
            left: 'center',
            top: 'center',
            icon: 'none',
            align:'center',
            textStyle: {
                color: "#fff",
                fontSize: 16 * scale,
                rich: rich
            },
        },
        series: [{
            name: '应用数量',
            type: 'pie',
            radius: ['42%', '50%'],
            hoverAnimation: false,
            color: ['#FF0000', '#FFD700', '#87CEEB', '#00ffb4', '#00FFFF', '#4B0082','#800080'],
            label: {
                normal: {
                    formatter: function(params, ticket, callback) {
                        var total = 0; //考生总数量
                        var percent = 0; //考生占比
                        appTypeData.forEach(function(value, index, array) {
                            total += value.value;
                        });
                        percent = ((params.value / total) * 100).toFixed(1);
                        return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
                    },
                    rich: rich
                },
            },
            labelLine: {
                normal: {
                    length: 55 * scale,
                    length2: 0,
                    lineStyle: {
                        color: '#000000'
                    }
                }
            },
            data: appTypeData
        }]
    };




    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>